<template>
    <div class="news-singer">
        <span >|</span>
        <span>最新音乐</span>
         <!-- 歌曲列表 -->
         <div class="list">
            <van-list
               v-model="loading"
               :finished="finished"
               finished-text="没有更多了"
               @load="onLoad">

                <div v-for="(item,index) in result" :key = "index" class="t" 
                @click="selectItem(item)">
                    <h4>{{item.name}}</h4>
                        <div class="circle">
                            <div class="triangle"></div>
                        </div>
                    <div class="song">
                        <span v-for="(songItem,index) in item.song.artists" :key="index">
                         {{songItem.name}}
                         <span v-show="index != item.song.artists.length -1">/</span>
                        </span>
                        <span>-</span>
                        <span>{{item.name}}</span>
                        
                    </div>
                   
                </div>
            </van-list>
         </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            result:[],//歌曲列表
            length:0,//歌曲数目
            list:[],
            loading:false,
            finished:false,
        
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            this.$request("get", "/personalized/newsong",)
            .then((res)=>{
                console.log(res)
                this.result = res.result;//获取歌曲列表信息
                this.length = res.result.length;//获取歌曲数目
            })
        },
        onLoad(){
      setTimeout(()=>{
        //注意splice和slice方法差异
        this.list = this.list.concat(this.result.slice(0,10))
        // console.log(this.list);

        //加载状态结束
        this.loading = false;

        //数据全部加载完成
        if(this.list.length >= this.length){
          this.finished = true;
        }
      },1000)
    },
    selectItem(item){
        const id = item.id;
        console.log(id);
        this.$router.push({path: `/songlist/${id}`})
       }
    }
}
</script>

<style scoped>
.news-singer{
 text-align: left;

}
.news-singer span{
    font-weight: bold;
    font-size: 1.5rem;
}
.news-singer>span:nth-child(1){
    color: red;
    font-size: 2rem;
}
.shu{
    
    color: rgb(255, 0, 0);
    font-size: 1.5rem;
}
.t{
    border-bottom: solid;
    border-width: 0.1em;
    border-color:rgb(161, 161, 161);
}
.list{
    margin: 0 1rem; 
}
.list h4{
    text-align: left;
    
}
.song {
    text-align: left;
    
}
.song span{
    font-size: 0.8rem;
    color: rgb(195, 198, 201);
}

.song>span:nth-last-child(2){
  margin: 0 0.2rem;
  font-weight: 900;
  color: rgb(195, 198, 201);
}
.circle{
    float: right;
    width: 1rem;
    height: 1rem;
    border: 0.01rem solid rgb(149, 144, 144);
    border-radius: 50%;
    position: relative;
    /* background: linear-gradient(red, rgb(250, 239, 77)); */
}
.triangle {

	width: 0;

	height: 0;

	font-size: 0;

	line-height: 0;

	border-width: 0.3rem  0.3rem  0.3rem  0.4rem;

	border-style: solid;

	border-color: transparent transparent transparent rgb(157, 157, 157);

	position: absolute;

	top: 20%;

	left: 36%;

}
</style>